<template>
  <div class="app-container">
    <el-row style="margin-bottom: 20px;">
      <el-button v-if="roleCheck('create')" type="primary" @click="openDialog({dialogName: 'create-department-dialog',props:{}})">新增部门/岗位
      </el-button>
    </el-row>
    <tree-table
      :expandAll="true"
      :data="data"
      border>
      <!--<el-table-column type="expand">-->
      <!--<template slot-scope="scope">-->
      <!--<el-table :data="scope.row.jobList" border v-loading="loading">-->
      <!--<el-table-column label="新建时间" align="center" width="160px">-->
      <!--<template slot-scope="{row}">-->
      <!--{{row.createTime | toTime}}-->
      <!--</template>-->
      <!--</el-table-column>-->
      <!--<el-table-column label="岗位" align="center" width="120px">-->
      <!--<template slot-scope="{row}">-->
      <!--<el-tag>{{row.name}}</el-tag>-->
      <!--</template>-->
      <!--</el-table-column>-->
      <!--<el-table-column label="备注" align="center" prop="remark">-->
      <!--</el-table-column>-->
      <!--<el-table-column label="状态" width="80px" align="center">-->
      <!--<template slot-scope="{row}">-->
      <!--<el-tag type="danger" v-if="row.status === 1">锁定</el-tag>-->
      <!--<el-tag v-else>正常</el-tag>-->
      <!--</template>-->
      <!--</el-table-column>-->
      <!--<el-table-column label="最后修改" align="center" width="160px">-->
      <!--<template slot-scope="{row}">-->
      <!--{{row.lastUpdate | toTime}}-->
      <!--</template>-->
      <!--</el-table-column>-->
      <!--<el-table-column label="操作" align="center" width="300px">-->
      <!--<template slot-scope="{row}">-->
      <!--<el-button type="text" v-if="row.status === 0" @click="toggleJob(row, 'close')">锁定</el-button>-->
      <!--<el-button type="text" v-else @click="toggleJob(row, 'open')">开启</el-button>-->
      <!--<el-button type="text"-->
      <!--@click="openDialog({dialogName: 'permission-tree', props:row})">岗位权限设置-->
      <!--</el-button>-->
      <!--<el-button type="text"-->
      <!--@click="openDialog({dialogName: 'copy-auth-dialog', props: row})">-->
      <!--复制权限-->
      <!--</el-button>-->

      <!--</template>-->
      <!--</el-table-column>-->
      <!--</el-table>-->
      <!--</template>-->
      <!--</el-table-column>-->
      <el-table-column label="新建时间" align="center" width="160px">
        <template slot-scope="scope">
          {{scope.row.createTime | toTime}}
        </template>
      </el-table-column>
      <el-table-column label="部门" align="center" width="120px">
        <template slot-scope="{row}">
          <router-link
            :to="{name: 'permission-user',
              query: {
              departmentId: row.departmentId,
              jobId: row.jobId
              }
            }"
            replace>
            <el-tag>{{row.name}}({{row.userCount}})</el-tag>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="remark">
      </el-table-column>
      <el-table-column label="状态" width="80px" align="center">
        <template slot-scope="{row}">
          <el-tag type="danger" v-if="row.status === 1">锁定</el-tag>
          <el-tag v-else>正常</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="最后修改" align="center" width="160px">
        <template slot-scope="{row}">
          {{row.lastUpdate | toTime}}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="300px">
        <template slot-scope="{row}">
          <el-button type="text" v-if="row.status === 0 && roleCheck('switch')" @click="toggleDepartment(row, 'close')">锁定</el-button>
          <el-button type="text" v-else-if="roleCheck('switch')" @click="toggleDepartment(row, 'open')">开启</el-button>
          <el-button type="text" v-if="row.edit && roleCheck('edit')"
                     @click="openDialog({dialogName: 'create-department-dialog', props: row})">
            编辑
          </el-button>
          <el-button type="text"
                     v-if="row.edit && roleCheck('check')"
                     @click="openDialog({dialogName: 'display-member-dialog', props: row})">
            查看成员
          </el-button>
          <el-button type="text" v-if="row.editAuth && roleCheck('role-set')"
                     @click="openDialog({dialogName: 'permission-tree', props:row})">岗位权限设置
          </el-button>
          <el-button type="text" v-if="row.editAuth && roleCheck('data-role-set')"
                     @click="openDialog({dialogName: 'data-permission-tree', props:row})">数据权限设置
          </el-button>
          <el-button type="text" v-if="row.copy && roleCheck('copy')"
                     @click="openDialog({dialogName: 'copy-auth-dialog', props: row})">
            复制权限
          </el-button>

        </template>
      </el-table-column>
    </tree-table>
    <create-department-dialog
      v-if="dialogName === 'create-department-dialog'"
      v-model="dialogVisible"
      :id="dialogProps.id"
      :row-data="dialogProps"
      @submit="submitFinished"/>
    <display-member-dialog v-if="dialogName === 'display-member-dialog'"
                           v-model="dialogVisible" :department-id="dialogProps.departmentId"/>
    <copy-auth-dialog v-if="dialogName === 'copy-auth-dialog'"
                      v-model="dialogVisible" :id="dialogProps.jobId" @submit="submitFinished"/>
    <permission-tree v-if="dialogName === 'permission-tree'"
                     v-model="dialogVisible"
                     :job-id="dialogProps.jobId"/>
    <data-permission-tree v-if="dialogName === 'data-permission-tree'"
                     v-model="dialogVisible"
                     :job-id="dialogProps.jobId"/>
  </div>
</template>

<script>
import { form, grid, dialog } from '@/build';
import treeTable from '@/components/TreeTable';
import {
  authDepartmentGetApi,
  authDepartmentToggleApi,
  authJobToggleApi,
  authDepartmentJobListApi,
} from '@/services/api/permission';

import CreateDepartmentDialog from './createDepartmentDialog';
import DisplayMemberDialog from './displayMemberDialog';
import CopyAuthDialog from './copyAuthDialog';
import PermissionTree from './permissionTree';
import dataPermissionTree from './dataPermissionTree';

const auth = [
  {
    type: 'parent',
    auth: {
      open: true,
      lock: true,
      edit: true,
      list: true,
    },
  },
  {
    type: 'children',
    auth: {
      // open: true,
      lock: true,
      editAuth: true,
      copy: true,
    },
  },
];

export default {
  name: 'work-setting',
  mixins: [form, grid, dialog],
  components: {
    treeTable,
    CreateDepartmentDialog,
    DisplayMemberDialog,
    PermissionTree,
    CopyAuthDialog,
    dataPermissionTree,
  },
  data() {
    return {
      expandAll: false,
      data: [],
      args: [null, null, 'createTime'],
    };
  },
  methods: {
    toggleDepartment({ departmentId, status }, type = 'open') {
      const display = type === 'open' ? '开启' : '锁定';

      this.$confirm(`确定要${display}此部门岗位下所有账户的登录权限吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        authDepartmentToggleApi({
          departmentId,
          status: status === 0 ? 1 : 0,
        }).then(([result, data]) => {
          if (result) {
            this.getAll();
            this.$message({
              type: 'success',
              message: `${display}成功!`,
            });
          } else {
            this.$message({
              type: 'error',
              message: `${display}失败!${data.message}`,
            });
          }
        });
      })
        .catch(() => {
        });
    },
    toggleJob({ jobId, status }, type = 'open') {
      const display = type === 'open' ? '开启' : '锁定';

      this.$confirm(`确定要${display}此岗位下所有账户的登录权限吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        authJobToggleApi({
          jobId,
          status: status === 0 ? 1 : 0,
        }).then(([result, data]) => {
          if (result) {
            this.getAll();
            this.$message({
              type: 'success',
              message: `${display}成功!`,
            });
          } else {
            this.$message({
              type: 'error',
              message: `${display}失败!${data.message}`,
            });
          }
        });
      })
        .catch(() => {
        });
    },
    // expandHandler(row) {
    //   const {departmentId} = row
    //
    //   authDepartmentJobListApi({departmentId}).then(([result, data]) => {
    //     if (result) {
    //       row.jobList = data
    //     }
    //   })
    //
    // }
  },
  mounted() {
    this.bindGet(authDepartmentGetApi, 'data', {
      action: 'getGrid',
      format: departmentList => _.map(departmentList, (departmentInfo) => {
        departmentInfo.children = _.map(departmentInfo.jobList, info => ({ ...info, ...auth[1].auth }));
        return { ...departmentInfo, ...auth[0].auth };
      }),
    });

    this.getAll();
  },
};
</script>
